<template>
  <div>
    <ul class="file-list">
      <li v-for="it in FileList" :key="it.fileUrl">
        <span>{{ it.fileUrl | filenameHidden | strHidden}}</span>
        <!--  -->
        <a class="close" @click="download(it.fileUrl)">预览</a>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {}
  },
  props: {
    list: {
      type: Array|String,
      default: () => [],
    },
  },
  mounted() {},
  computed: {
    FileList:function(){
      console.log(this.list)
      if(typeof(this.list) == 'string'){
        let list = [{fileUrl: this.list}]
        return list
      }else{
        return this.list
      }
    }
  },
  filters:{
    strHidden:function(str){
      let arr = str.split('.')
      if(arr[0]){
        if(arr[0].length > 6){
          arr[0] = arr[0].substr(0,3)+'...'+arr[0].substr(arr[0].length-2, arr[0].length-1)
        }
        return arr[0] +"."+ arr[1]
      }
      
    }
  },
  watch: {},
  methods: {
    handleClick() {
      if (this.list.length <= 1) {
      }
    },
    handleDelFileList(){

    },
    download (data) {
        let baseUrl = this.$store.getters.baseUrl
      // 创建a标签
      const link = document.createElement('a')
      link.target= '_blank';
      // download属性
      link.setAttribute('download', baseUrl + '/' + data)
      // href链接
      link.setAttribute('href', baseUrl + '/' + data)
      // 自执行点击事件
      link.click()
    },
  },
  destroyed() {},
}
</script>
<style lang='less' scoped>
.file-list {
  padding: 0;
  min-width:120px;
  max-width: 150px;
  li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 35px 5px 10px;
    line-height: 20px;
    span{
      display: block;
      white-space: nowrap;
      overflow: hidden;
    }
    a{
      position: absolute;
      display: block;
      right: 0;
      height: 30px;
      top: 0;
      width: 30px;
      line-height: 30px;
    }
  }
}
</style>